ActionSheet
Description
Display a menu styled as an iOS 'Action Sheet'.
Discussion
A common user interface design in iOS mobile applications is the Action Sheet. An action sheet is a series of menu options that animates into display from the bottom of the screen. The menu can be divided into logical sections.
Properties
- Property
- Description
- Menu items
Defines the menu items shown in the Action Sheet. The menu items are defined as a JSON string (see "Defining Menu items" below.) Use the Sample JSON definition link in the "Action Sheet - Menu Definition" dialog to insert a sample menu.
- Width
The width of the Action Sheet defined using CSS units. If left blank, the Action Sheet will automatically fill the available width..
Defining Menu items
The Action Sheet Menu items is used to define the menu. The Action Sheet menu is defined as an array of arrays of JSON.
Each array within the outer array defines a menu group. Each item within the nested arrays is an object that defines either a menu item or a comment. The objects have an 'html' property and an optional 'action' property. If an item does not have an 'action' property it is rendered as a label. The 'action' property is a Javascript function to call when the menu item is tapped.
For example:
[
[
{html: 'This is the help text above the Action Sheet. It does not have an action'},
{html: 'Save', action: function(){alert('save')} },
{html: 'Save As...', action: function(){alert('saveas')} }
],
[
{html: 'New', action: function(){alert('new')}},
{html: 'Open...', action: function(){alert('open')}}
],
[
{html: 'Cancel', action: function(){alert('cancel')}}
]
]This creates the Action Sheet shown below:
Videos
Displaying an "Action Sheet"
A common user-interface technique in iOS applications is an Action Sheet - a popup menu with a series of options. In this video we show how easy it is to add an Action Sheet style menu to a UX component.
See Also